import React, {useState} from "react";
import {Button, Divider, Grid, InputLabel, makeStyles, Paper, Switch, TextField} from "@material-ui/core";

import {Toolbar} from "../../shared/components";
import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
import {
    MAINTENANCE_PRIORITY,
    METER_READING,
    OWNERSHIP_MODE,
    VEHICLE_STATUS
} from "../../shared/utilities/referenceData.util";
import ToggleButton from "@material-ui/lab/ToggleButton";
import Autocomplete from "@material-ui/lab/Autocomplete";
import {DatePicker, MuiPickersUtilsProvider} from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";

const useStyle = makeStyles(theme => ({
    paper: {padding: theme.spacing(3, 2)}
}));

const AddVehicle = ({onClose, onConfirm, ...props}) => {
    const classes = useStyle();
    const [state, setState] = useState({
        meterReadingType: 'Miles',
        status: '',
        inspectionFlag: false,
        purchaseDate: Date.now(),
        warrantyDate: Date.now(),
        year: Date.now(),
        lastServiceDate: Date.now(),
        maintenancePriority: '',
        ownershipMode: ''
    });

    const handleChange = (field, value) => {
        setState({...state, [field]: value});
    };

    return (
        <Grid container spacing={4}>
            <Toolbar
                title="Add Vehicle"
                actions={<React.Fragment>
                    <Button color="primary" variant="contained" onClick={onConfirm}>Add</Button>
                    <Button variant="contained" onClick={onClose}>Cancel</Button>
                </React.Fragment>}
            />

            <Grid item xs={12}>
                <Paper elevation={2} className={classes.paper}>
                    <Grid container spacing={3} alignItems={"center"}>
                        <Grid item xs={3}><InputLabel htmlFor="vehicleNumber">Vehicle Number</InputLabel></Grid>
                        <Grid item xs={9}>
                            <TextField
                                id="vehicleNumber"
                                variant="outlined"
                                fullWidth size={"small"}
                                onChange={e => console.log('Vehicle Number')}
                            />
                        </Grid>

                        <Grid item xs={3}><InputLabel htmlFor="vehicleName">Vehicle Name</InputLabel></Grid>
                        <Grid item xs={9}>
                            <TextField
                                id="vehicleName"
                                variant="outlined"
                                fullWidth size={"small"}
                                onChange={e => console.log('Vehicle Name')}
                            />
                        </Grid>

                        <Grid item xs={3}><InputLabel htmlFor="vehicleCategory">Vehicle Category</InputLabel></Grid>
                        <Grid item xs={9}>
                            <TextField
                                id="vehicleCategory"
                                variant="outlined"
                                fullWidth size={"small"}
                                onChange={e => console.log('Vehicle Category')}
                            />
                        </Grid>

                        <Grid item xs={3}><InputLabel htmlFor="vinNumber">VIN Number</InputLabel></Grid>
                        <Grid item xs={9}>
                            <TextField
                                id="vinNumber"
                                variant="outlined"
                                fullWidth size={"small"}
                                onChange={e => console.log('VIN Number')}
                            />
                        </Grid>

                        <Grid item xs={3}><InputLabel htmlFor="model">Model</InputLabel></Grid>
                        <Grid item xs={9}>
                            <TextField
                                id="model"
                                variant="outlined"
                                fullWidth size={"small"}
                                onChange={e => console.log('Model')}
                            />
                        </Grid>

                        <Grid item xs={3}><InputLabel htmlFor="meterReading">Meter Reading</InputLabel></Grid>
                        <Grid item xs={5}>
                            <TextField
                                id="meterReading"
                                variant="outlined"
                                fullWidth size={"small"}
                                onChange={e => console.log('Meter Reading')}
                            />
                        </Grid>
                        <Grid item xs={4}>
                            <ToggleButtonGroup
                                size="small" exclusive
                                value={state.meterReadingType}
                                onChange={(e, meterReadingType) => handleChange('meterReadingType', meterReadingType)}
                            >
                                {METER_READING.map(item => (
                                    <ToggleButton key={item} value={item}>{item}</ToggleButton>
                                ))}
                            </ToggleButtonGroup>
                        </Grid>

                        <Grid item xs={3}><InputLabel htmlFor="status">Status</InputLabel></Grid>
                        <Grid item xs={9}>
                            <Autocomplete
                                id="status"
                                size="small"
                                options={VEHICLE_STATUS}
                                renderInput={(params) => (
                                    <TextField {...params} variant="outlined"/>
                                )}
                                disableClearable
                                onChange={e => handleChange('status', e.target.value)}
                            />
                        </Grid>

                        <Grid item xs={12}><Divider/></Grid>

                        <Grid item xs={3}><InputLabel htmlFor="businessUnit">Business Unit</InputLabel></Grid>
                        <Grid item xs={9}>
                            <TextField
                                id="businessUnit"
                                variant="outlined"
                                fullWidth size={"small"}
                                onChange={e => console.log('Business Unit')}
                            />
                        </Grid>

                        <Grid item xs={3}><InputLabel htmlFor="location">Location</InputLabel></Grid>
                        <Grid item xs={9}>
                            <TextField
                                id="location"
                                variant="outlined"
                                fullWidth size={"small"}
                                onChange={e => console.log('Location')}
                            />
                        </Grid>

                        <Grid item xs={3}><InputLabel htmlFor="assetValue">Asset Value</InputLabel></Grid>
                        <Grid item xs={9}>
                            <TextField
                                id="assetValue"
                                variant="outlined"
                                fullWidth size={"small"}
                                onChange={e => console.log('assetValue')}
                            />
                        </Grid>

                        <Grid item xs={3}><InputLabel htmlFor="purchaseDate">Purchase Date</InputLabel></Grid>
                        <Grid item xs={9}>
                            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                                <DatePicker
                                    id="purchaseDate"
                                    autoOk disableFuture
                                    variant="inline"
                                    inputVariant="outlined"
                                    format="dd-MMM-yyyy"
                                    size="small"
                                    value={state.purchaseDate}
                                    onChange={date => handleChange('purchaseDate', date)}
                                />
                            </MuiPickersUtilsProvider>
                        </Grid>

                        <Grid item xs={3}><InputLabel htmlFor="warrantyDate">Warranty Date</InputLabel></Grid>
                        <Grid item xs={9}>
                            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                                <DatePicker
                                    id="warrantyDate"
                                    variant="inline" autoOk
                                    inputVariant="outlined"
                                    format="dd-MMM-yyyy"
                                    size="small"
                                    value={state.warrantyDate}
                                    onChange={date => handleChange('warrantyDate', date)}
                                />
                            </MuiPickersUtilsProvider>
                        </Grid>

                        <Grid item xs={3}><InputLabel htmlFor="inspectionFlag">GPS Inspection Flag</InputLabel></Grid>
                        <Grid item xs={9}>
                            <Switch
                                id="inspectionFlag"
                                name="inspectionFlag"
                                checked={state.inspectionFlag}
                                onChange={() => handleChange('inspectionFlag', !state.inspectionFlag)}
                            />
                        </Grid>

                        <Grid item xs={3}>
                            <InputLabel htmlFor="gpsInspectionRange">GPS Inspection Range (In Meters)</InputLabel>
                        </Grid>
                        <Grid item xs={9}>
                            <TextField
                                id="gpsInspectionRange"
                                variant="outlined"
                                fullWidth size={"small"}
                                onChange={e => console.log('gpsInspectionRange')}
                            />
                        </Grid>

                        <Grid item xs={12}><Divider/></Grid>

                        <Grid item xs={3}><InputLabel htmlFor="year">Year</InputLabel></Grid>
                        <Grid item xs={9}>
                            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                                <DatePicker
                                    id="year"
                                    autoOk disableToolbar
                                    variant="inline"
                                    inputVariant="outlined"
                                    views={["year"]} size="small"
                                    value={state.year}
                                    onChange={date => handleChange('year', date)}
                                />
                            </MuiPickersUtilsProvider>
                        </Grid>

                        <Grid item xs={3}><InputLabel htmlFor="chassisNumber">Chassis Number</InputLabel></Grid>
                        <Grid item xs={9}>
                            <TextField
                                id="chassisNumber"
                                variant="outlined"
                                fullWidth size={"small"}
                                onChange={e => console.log('chassisNumber')}
                            />
                        </Grid>

                        <Grid item xs={3}><InputLabel htmlFor="manufacture">Manufacture</InputLabel></Grid>
                        <Grid item xs={9}>
                            <TextField
                                id="manufacture"
                                variant="outlined"
                                fullWidth size={"small"}
                                onChange={e => console.log('manufacture')}
                            />
                        </Grid>

                        <Grid item xs={3}><InputLabel htmlFor="licPlate">License Plate</InputLabel></Grid>
                        <Grid item xs={9}>
                            <TextField
                                id="licPlate"
                                variant="outlined"
                                fullWidth size={"small"}
                                onChange={e => console.log('licPlate')}
                            />
                        </Grid>

                        <Grid item xs={3}>
                            <InputLabel htmlFor="lastMeterReading">Last Service Reading</InputLabel>
                        </Grid>
                        <Grid item xs={9}>
                            <TextField
                                id="lastMeterReading"
                                variant="outlined"
                                fullWidth size={"small"}
                                onChange={e => console.log('lastMeterReading')}
                            />
                        </Grid>

                        <Grid item xs={3}>
                            <InputLabel htmlFor="lastServiceDate">Last Service Date</InputLabel>
                        </Grid>
                        <Grid item xs={9}>
                            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                                <DatePicker
                                    id="lastServiceDate"
                                    autoOk disableFuture
                                    variant="inline"
                                    inputVariant="outlined"
                                    format="dd-MMM-yyyy"
                                    size="small"
                                    value={state.lastServiceDate}
                                    onChange={date => handleChange('lastServiceDate', date)}
                                />
                            </MuiPickersUtilsProvider>
                        </Grid>

                        <Grid item xs={3}><InputLabel htmlFor="regState">Registration State</InputLabel></Grid>
                        <Grid item xs={9}>
                            <TextField
                                id="regState"
                                variant="outlined"
                                fullWidth size={"small"}
                                onChange={e => console.log('regState')}
                            />
                        </Grid>

                        <Grid item xs={12}><Divider/></Grid>

                        <Grid item xs={3}><InputLabel htmlFor="operatorName">Operator Name</InputLabel></Grid>
                        <Grid item xs={9}>
                            <TextField
                                id="operatorName"
                                variant="outlined"
                                fullWidth size={"small"}
                                onChange={e => console.log('operatorName')}
                            />
                        </Grid>

                        <Grid item xs={3}>
                            <InputLabel htmlFor="maintenancePriority">Maintenance Priority</InputLabel>
                        </Grid>
                        <Grid item xs={9}>
                            <Autocomplete
                                id="maintenancePriority"
                                size="small"
                                options={MAINTENANCE_PRIORITY}
                                renderInput={(params) => (
                                    <TextField {...params} variant="outlined"/>
                                )}
                                disableClearable
                                onChange={e => handleChange('maintenancePriority', e.target.value)}
                            />
                        </Grid>

                        <Grid item xs={3}>
                            <InputLabel htmlFor="ownershipMode">Ownership Mode</InputLabel>
                        </Grid>
                        <Grid item xs={9}>
                            <Autocomplete
                                id="ownershipMode"
                                size="small"
                                options={OWNERSHIP_MODE}
                                renderInput={(params) => (
                                    <TextField {...params} variant="outlined"/>
                                )}
                                disableClearable
                                onChange={e => handleChange('ownershipMode', e.target.value)}
                            />
                        </Grid>

                        <Grid item>
                            <InputLabel htmlFor="notes">Notes</InputLabel>
                        </Grid>
                        <Grid item xs={12}>
                            <TextField
                                id="notes"
                                variant="outlined"
                                fullWidth size={"small"}
                                multiline rows={4}
                                onChange={e => console.log('notes')}
                            />
                        </Grid>
                    </Grid>
                </Paper>
            </Grid>
        </Grid>
    );
};

export default AddVehicle;
